<template>
  <div class="mod-config">
    <basic-container>
      <navigationZDRW :sign="{a:true,b:false,c:false}"></navigationZDRW>
      <div class="boxsty zhiBiao" v-if="zhiShow==1">
        <!-- <div class="flex justifyContentSpaceBetween">
          <div class="tabletext">任务书创建</div>
        </div> -->
        <div  :height="searchheight" >
          <span style="float:right;margin-top: -30px;cursor: pointer;" @click="searchchangeadvanced">{{ searchadvanced ? "查询条件收起" : "查询条件展开" }}
          <i :class="searchadvanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" /> </span>
           <div  v-show="searchadvanced" >
            <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()"  class="form-inline">
              <el-form-item label="考核人">
                <el-input v-model="dataForm.createUserName" placeholder="考核人" :clearable="true"></el-input>
              </el-form-item>
              <el-form-item label="考核人职务">
                <el-input v-model="dataForm.createUserZhiWu" placeholder="考核人职务" :clearable="true"></el-input>
              </el-form-item>
              <el-form-item label="考核周期">
                <el-date-picker
                  v-model="dataForm.rwYxqq"
                  type="date"
                  placeholder="选择日期">
                </el-date-picker>
                <span class="mg-0-10">至</span>
                <el-date-picker
                  v-model="dataForm.rwYxqz"
                  type="date"
                  placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="任务状态">
                <el-select v-model="dataForm.rwStatus" placeholder="请选择任务状态">
                  <el-option
                    v-for="item in optionsStatus"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button icon="el-icon-search" type="primary" class="marginLeft"
                          @click="getDataList(1)">检索
                </el-button>
              </el-form-item>
            </el-form>
           </div>
        </div>
        <div>
<!--          <el-button type="primary" >打印</el-button>-->
<!--          <el-button type="primary" >导出</el-button>-->
          <el-button type="primary" @click="renwuxiada">任务下达</el-button>
          <el-button type="primary" @click="tuisongchuangjian">推送创建</el-button>
          <el-button type="primary" @click="deleteBatch()">批量删除</el-button>
          <el-button type="primary" @click="addOrUpdateHandle()">新增#</el-button>
        </div>
      <div class="avue-crud">
          <div  class="flex">
            <div class="mt10">
              业绩合同
              <span>
              <el-radio v-model="radio"  label="1">个人</el-radio>
              <el-radio v-model="radio"  label="2">机构</el-radio>
          </span>
              <span style="margin-left:160px;" v-if="permissions.hetongrenwu_hetonghtxxdjb_scope">
            数据范围
            <el-radio-group v-model="radioTwo">
              <el-radio v-for="item in radioTwoList" :label="item.value">{{ item.name }}</el-radio>
            </el-radio-group>
                <!--              <el-radio v-for="item in radioTwoList" v-model="radioTwo" label="-1">全部</el-radio>-->
                <!--                        <el-radio v-model="radioTwo" label="-1">全部</el-radio>-->
                <!--                        <el-radio v-model="radioTwo" label="1">本部</el-radio>-->
                <!--                        <el-radio v-model="radioTwo" label="0">所属机构</el-radio>-->
                  </span>
            </div>
          </div>
          <el-table
            ref="table"
            style="width: 100%;margin-top:20px"
            :data="dataList"
            border
            v-loading="dataListLoading">
            <el-table-column type="selection" width="55" header-align="center" align="center"></el-table-column>
            <el-table-column type="index" width="80" header-align="center" align="center" label="序号"></el-table-column>
            <el-table-column
              prop="faqiName"
              header-align="center"
              align="center"
              label="发起名称">
             <template slot-scope="scope">
                        <span  @click="checkDetails(scope.row)" style="color:#0e258c;cursor: pointer;">{{scope.row.faqiName}}</span>
                    </template>
            </el-table-column>
            <el-table-column
              prop="jigoucount"
              header-align="center"
              align="center"
              label="机构数量">
            </el-table-column>
            <el-table-column
              prop="startdate"
              header-align="center"
              align="center"
              label="开始时间">
            </el-table-column>
            <el-table-column
              prop="enddate"
              header-align="center"
              align="center"
              label="活动截止时间">
            </el-table-column>
            <el-table-column
              prop="htSydx"
              header-align="center"
              align="center"
              label="有效期">
              <template slot-scope="scope">
                <span>{{scope.row.rwYxqq}}至{{scope.row.rwYxqz}}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="rwStatus"
              header-align="center"
              align="center"
              label="任务状态">
              <template slot-scope="scope">
                <el-popover
                  placement="left"
                  width="200"
                  trigger="hover">
                  <div style="border-bottom: solid 1px #0e258c;padding-bottom:10px">部门审核状态</div>
                  <div v-for="item in cutout(scope.row.deptStatusStr)">
                    <span v-if="item.indexOf('审核完成')!=-1" style="color:#0bbf4a">{{item}}</span>
                    <!--<span v-else-if="item.indexOf('未完成')!=-1" style="color:red">{{item}}</span>-->
                    <span v-else  style="color:red">{{item}}</span>
                  </div>
                  <div slot="reference" class="name-wrapper">
                      <span v-if="scope.row.rwStatus == 0">填报中</span>
                      <span v-if="scope.row.rwStatus == 1">创建中</span>
                      <span v-if="scope.row.rwStatus == 2">审批完成</span>
                      <span v-if="scope.row.rwStatus == 3">任务已下达</span>
                  </div>
                </el-popover>
              </template>
            </el-table-column>
            <!-- <el-table-column
              header-align="center"
              align="center"
              fixed="right"
              label="操作">
              <template slot-scope="scope">
                <el-button type="primary" plain size="small" @click="checkDetails(scope.row)">查看#</el-button>
              </template>
            </el-table-column> -->
          </el-table>
        </div>
        <div class="avue-crud__pagination">
          <el-pagination
            @size-change="sizeChangeHandle"
            @current-change="currentChangeHandle"
            :current-page="pageIndex"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            :total="totalPage"
            background
            layout="total, sizes, prev, pager, next, jumper">
          </el-pagination>
        </div>
      </div>
      <!-- 弹窗, 新增  -->
      <RWFQForm v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList" @openZhibiao="openZhibiao"></RWFQForm>
      <!-- 指标维护-->
      <zhibiaoForm v-if="zhiShow==2" :zhibiaoForm='zhibiaoForm' v-on:zhibiaoChild='zhibiaoChild'></zhibiaoForm>
      <!--      任务书编辑-指标-->

      <zdrwcjForm ref="zdrwcjForm" v-if="zhiShow==3"></zdrwcjForm>
<!--      <rwszbForm v-if="zhiShow==3" :rwszbForm='rwszbForm' v-on:zhibiaoChild='renwushuzbChild'></rwszbForm>-->

      <div class="text-center" v-if="zhiShow!=1">
        <el-button type="primary" @click="zhiShow=1">返回</el-button>
      </div>
    </basic-container>
  </div>
</template>

<script>
import {fetchList, delObj,radioTwoList} from '@/api/hetongrenwu/hetonghtxxdjb'
import RWFQForm from '@/views/hetongrenwu/zhongdianrenwu/zhongdianrwcj/rwfq/rwfq-form'
import zhibiaoForm from '@/views/hetongrenwu/components/zhibiao-form.vue'
import rwszbForm from '@/views/hetongrenwu/components/renwushuzb-form.vue'
import khrwTable from '@/views/hetongrenwu/components/zhongdian-kaoherenwu-table.vue'
import zdrwcjForm from '@/views/hetongrenwu/components/zhongdianrwcj-form.vue'
import {getRenwufaqiPage,tuisongchuangjian,renwuxiada,deleteBatchRwfq} from '@/api/hetongrenwu/zhongdian/renwuchuangjian'
import {mapGetters} from 'vuex'

export default {
  components: {
    RWFQForm,
    zhibiaoForm,
    rwszbForm,
    khrwTable,
    zdrwcjForm
  },
  data() {
    return {
      optionsStatus: [
        {
          value: 0,
          label: '填报中'
        }, {
          value: 1,
          label: '创建中'
        }, {
          value: 2,
          label: '审批完成'
        }, {
          value: 3,
          label: '任务已下达'
        }
      ],
      dataForm: {
        key: ''
      },
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      addOrUpdateVisible: false,
      radio:'1',
      radioTwo:'-1',
      zhiShow:'1',
      zhibiaoForm:{},
      renwufaqiTableData:{},
      rwszbForm:{},
      searchadvanced: true,
      searchheight: '0',
      radioTwoList:radioTwoList
    }
  },
  watch:{
    radio(value){
      if(value){
        this.getDataList();
      }
    },
    radioTwo(value){
      if(value){
        this.getDataList();
      }
    }
  },
  created() {
    this.getDataList()
  },
  computed: {
    ...mapGetters(['permissions'])
  },
  methods: {
    searchchangeadvanced() {
      this.searchadvanced = !this.searchadvanced;
      if(this.searchadvanced){
        this.searchheight= 'auto'
      }
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true
      getRenwufaqiPage(Object.assign({
        type:this.radio,
        isbenbu:this.radioTwo,
        current: this.pageIndex,
        size: this.pageSize,
        createUserName:this.dataForm.createUserName,
        createUserZhiWu:this.dataForm.createUserZhiWu,
        rwYxqq:this.dataForm.rwYxqq,
        rwYxqz:this.dataForm.rwYxqz,
        rwStatus:this.dataForm.rwStatus

      })).then(response => {
        this.dataList = response.data.data.records
        this.totalPage = response.data.data.total
      })
      this.dataListLoading = false
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    },
    // 新增 / 修改
    addOrUpdateHandle(id) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id)
      })
    },
    deleteBatch(){
      var data=this.$refs.table.selection;
      if(data.length==0){
        this.$message.error("请至少选择一个任务！");
        return;
      }
      var ids=[];
      for(var i=0;i<data.length;i++){
        ids.push(data[i].id)
      }
      var idsStr=ids.join(',')
      this.$confirm('是否要删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        return deleteBatchRwfq({ids:idsStr})
      }).then(data => {
        this.$message.closeAll();
        this.$message.success('删除成功')
        this.getDataList()
      })
    },

    tuisongchuangjian(){
      var data=this.$refs.table.selection;
      if(data.length==0){
        this.$message.error("请选择一个任务！");
        return;
      }
      if(data.length>1){
        this.$message.error("只能选择一个任务！");
        return;
      }
      if(data[0].rwStatus!=0){
        this.$message.error("请选择填报中的任务！");
        return;
      }
      this.$confirm('是否要推送创建吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        return tuisongchuangjian({id:data[0].id})
      }).then(data => {
        this.$message.closeAll();
        this.$message.success('推送创建成功')
        this.getDataList()
      })
    },
    renwuxiada(){
      var data=this.$refs.table.selection;
      if(data.length==0){
        this.$message.error("请选择一个任务！");
        return;
      }
      if(data.length>1){
        this.$message.error("只能选择一个任务！");
        return;
      }
      if(data[0].rwStatus!=2){
        this.$message.error("请选择审批完成的任务！");
        return;
      }
      this.$confirm('是否要下达任务吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        return renwuxiada({id:data[0].id})
      }).then(data => {
        this.$message.closeAll();
        this.$message.success('推送创建成功')
        this.getDataList()
      })
    },
    // 删除
    deleteHandle(id) {
      this.$confirm('是否确认删除ID为' + id, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        return delObj(id)
      }).then(data => {
        this.$message.closeAll();
        this.$message.success('删除成功')
        this.getDataList()
      })
    },
    //子集信息
    renwushuzbChild(data){
      if(data){
        this.zhiShow=1
      }
    },
    //新增子集返回的数据(关闭修改页面，打开指标库维护)
    openZhibiao(data){
      this.addOrUpdateVisible = false;
      this.zhiShow=2;
      this.zhibiaoForm={
        enter:0,
        disabled:false
      }
    },
    //编辑查看
    checkDetails(row){
      this.zhiShow=3;
      // this.zhiShow=3;
      // this.rwszbForm={
      //   enter:0,
      //   disabled:false
      // }
      this.$nextTick(() => {
        this.$refs.zdrwcjForm.init(row,1);
      });

    },
    //变价查看子集信息返回
    zhibiaoChild(zhibiaoChild){
      if(zhibiaoChild){
        this.zhiShow=1

      }
    },
    cutout(cellValue) {
      if (cellValue) {
        var c = cellValue.split(",");
        if(c.size<1){
          c.push('-');
          c.push('-');
        } else if(c.size<2){
          c.push('-');
        }
        return c;
      }
    },
  }
}
</script>
